<template>
	<view class="app">
		<customTabbar></customTabbar>
		<!-- 顶部搜索框 -->
		<view class="myinput" @click="goToPopup"><u-search shape="round" height="68rpx" :showAction="false" ></u-search></view>
		<!-- 轮播图 -->
		<view class="top_swiper">
			<swiper indicator-dots="true" autoplay="true" interval="3000" circular="true">
				<swiper-item v-for="item in banner" :key="item.id"><image :src="item.image_url" mode="widthFix"></image></swiper-item>
			</swiper>
		</view>
		<!-- 居家部分 -->
		<view class="jujia">
			<view class="jujia_title" v-for="item in channel" :key="item.id">
				<image :src="item.icon_url" mode="widthFix"></image>
				<view>{{ item.name }}</view>
			</view>
		</view>
		<!-- 品牌制造商直供 -->
		<view class="pinpaizhizao">
			<view class="pinpaizhizao_title"><text>品牌制造商直供</text></view>
			<view class="pinpaizhizao_button">
				<view class="pinpaizhizao_image" v-for="item in brandList" :key="item.id" :style="{ background: item.pic_url }" @tap="switchtoBrand(item.id)">
					<view class="pinpaizhizao_text_top">{{ item.name }}</view>
					<view class="pinpaizhizao_text_button">￥ {{ item.floor_price.toFixed(2) }} 元</view>
				</view>
			</view>
		</view>
		<!-- //新品首发 -->
		<view class="xinpinshoufa">
			<view class="xinpinshoufa_topTitle">周一周四·新品首发</view>
			<GoodsList :chilGoodsList="newGoodsList"></GoodsList>
		</view>

		<!-- 人气推荐 -->
		<view class="renqituijian">
			<view class="renqituijian_title">人气推荐</view>
			<view class="renqituijian_jieshao" v-for="item in hotGoodsList" :key="item.id">
				<view class="renqituijian_jieshao_image"><image :src="item.list_pic_url" mode="widthFix"></image></view>
				<view class="renqituijian_jieshao_title">
					<view>{{ item.name }}</view>
					<view>{{ item.goods_brief }}</view>
					<view>￥ {{ item.retail_price.toFixed(2) }} 元</view>
				</view>
			</view>
		</view>

		<!-- 专题精选 -->
		<view class="zhuantijingx">
			<view class="zhuantijingx_big_text">专题精选</view>
			<scroll-view class="zhuantijingx_scroll" scroll-x>
				<view class="zhuantijingx_hezi">
					<view class="zhuantijingx_content" v-for="item in topicList" :key="item.id">
						<view class="zhuantijingx_image"><image :src="item.scene_pic_url" mode="scaleToFill"></image></view>
						<view class="zhuantijingx_tiele">
							{{ item.title }}
							<text>￥ {{ item.price_info.toFixed(2) }} 元 起</text>
						</view>
						<view class="zhuantijingx_subtitle">{{ item.subtitle }}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 居家一下内容 -->
		<view class="kd_shangcheng" v-for="item in categoryList" :key="item.id">
			<view class="kd_shangcheng_big_title">{{ item.name }}</view>
			<GoodsList :chilGoodsList="item.goodsList"></GoodsList>
		</view>
	</view>
</template>

<script>
import customTabbar from '@/custom-tab-bar/index.vue'
import { ApiGetHomeData } from '@/utils/api.js'
import GoodsList from '@/custom-tab-bar/GoodsList.vue'
export default {
	components: {
		customTabbar,
		GoodsList
	},
	data() {
		return {
			banner: [],
			channel: [],
			brandList: [],
			newGoodsList: [],
			hotGoodsList: [],
			topicList: [],
			categoryList: []
		}
	},
	async onLoad() {
		let res = await ApiGetHomeData()
		let { banner, channel, brandList, newGoodsList, hotGoodsList, topicList, categoryList } = res.data
		this.banner = banner //轮播
		this.channel = channel //居家
		this.brandList = brandList //品牌制造
		this.brandList.forEach((item, index) => {
			this.brandList[index].pic_url = `url(${this.brandList[index].pic_url}) no-repeat 0 0/100% 100%`;
		});
		this.newGoodsList = newGoodsList; //新品首发
		
		this.hotGoodsList = hotGoodsList; //人气推荐
		this.topicList = topicList;
		this.categoryList = categoryList;
		console.log(this.newGoodsList);
		this.hotGoodsList = hotGoodsList; //人气推荐
		this.topicList = topicList;
		this.categoryList = categoryList;
		console.log(this.banner);
	},
	methods: {
		// 跳转详情页
		switchtoBrand(id) {
			uni.navigateTo({ url: `/pages/brand/brand?id=${id}` })
		},
		goToPopup(){
			console.log(1);
			uni.navigateTo({
				url:"/pages/popup/popup"
			})
		}
	},
	onShow() {
		this.$store.commit('tabbarIndex', 0)
	}
}
</script>

<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
.app {
	background-color: #efefef;
	padding-bottom: 100rpx;
	.myinput {
		background-color: #fff;
		padding: 20rpx 24rpx;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
	}
	//轮播
	.top_swiper {
		swiper {
			width: 750rpx;
			height: 404rpx;
			margin-bottom: 3rpx;

			image {
				width: 100%;
			}
		}
	}
	// 居家
	.jujia {
		height: 170rpx;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(1, 1fr);
		gap: 0.5px;
		margin-bottom: 41rpx;

		.jujia_title {
			padding: 32rpx 16rpx;
			text-align: center;
			background-color: #fff;
			image {
				width: 56rpx;
			}

			view {
				font-size: 22rpx;
				line-height: 1.7;
				color: #646566;
			}
		}
	}
	// 品牌制造
	.pinpaizhizao {
		background-color: #fff;

		.pinpaizhizao_title {
			height: 100rpx;
			width: 100%;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
		}

		.pinpaizhizao_button {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-bottom: 40rpx;

			.pinpaizhizao_image {
				width: 367rpx;
				height: 234rpx;
				margin-bottom: 4rpx;
				.pinpaizhizao_text_top {
					height: 68rpx;
					padding-left: 20rpx;
					font-size: 26rpx;
					display: flex;
					align-items: center;
				}

				.pinpaizhizao_text_button {
					width: 208rpx;
					padding-left: 20rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					color: darkred;
				}
			}
		}
	}
	// 新品首发
	.xinpinshoufa {
		background-color: #fff;

		.xinpinshoufa_topTitle {
			height: 120rpx;
			font-size: 34rpx;
			padding-top: 32rpx;
			text-align: center;
		}
	}
	// 人气推荐
	.renqituijian {
		background-color: #fff;
		margin-top: 20rpx;

		.renqituijian_title {
			font-size: 38rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.renqituijian_jieshao {
			height: 208rpx;
			background-color: #fafafa;
			margin-top: 16rpx;
			padding: 16rpx 32rpx;
			display: flex;
			box-sizing: border-box;

			.renqituijian_jieshao_image {
				width: 176rpx;

				image {
					width: 100%;
				}
			}

			.renqituijian_jieshao_title {
				padding-left: 20rpx;

				:nth-child(1) {
					line-height: 58rpx;
					font-size: 34rpx;
				}

				:nth-child(2) {
					line-height: 80rpx;
					font-size: 24rpx;
				}

				:nth-child(3) {
					line-height: 40rpx;
					font-size: 22rpx;
				}
			}
		}
	}
	//专题精选
	.zhuantijingx {
		margin-top: 40rpx;
		padding: 0 16rpx;
		background-color: #fff;
		.zhuantijingx_big_text {
			height: 100rpx;
			font-size: 38rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.zhuantijingx_scroll {
			.zhuantijingx_hezi {
				width: 1860rpx;
				display: flex;
				.zhuantijingx_content {
					width: 600rpx;
					height: 532rpx;
					margin-right: 30rpx;
					box-sizing: border-box;
					&:nth-last-child(1) {
						margin-right: 0;
					}
					.zhuantijingx_image {
						image {
							height: 400rpx;
							width: 100%;
							display: block;
						}
					}
					.zhuantijingx_tiele {
						height: 80rpx;
						font-size: 32rpx;
						width: 90%;
						display: flex;
						align-items: center;
						overflow: hidden;
						white-space: nowrap;
						text {
							color: darkred;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					.zhuantijingx_subtitle {
						font-size: 28rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 90%;
						color: #333;
					}
				}
			}
		}
	}
	//居家一下内容
	.kd_shangcheng {
		background-color: #fff;
		padding-top: 36rpx;
		.kd_shangcheng_big_title {
			height: 100rpx;
			font-size: 38rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
